<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向树状图</title>
	<!-- 引入echarts库文件 -->
    <script src="static/echarts.min.js"></script>
    <!-- 引入jquery库文件 -->
    <script src="static/jquery.js"></script>


</head>
<body>
	<!-- 定义图表现实区域 -->
    <div id="main" style="width:1380px; height: 620px"></div>
	<script type="text/javascript">
		<!-- 初始化echarts对象 -->
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        myChart.showLoading();
        $.get('files/data_demo4.json', function (data) {
            myChart.hideLoading();

            myChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [data],

                        top: '18%',
                        bottom: '14%',

                        layout: 'radial',

                        symbol: 'emptyCircle',

                        symbolSize: 7,

                        initialTreeDepth: 3,

                        animationDurationUpdate: 750,

                        emphasis: {
                            focus: 'descendant'
                        }
                    }
                ]
            });
        });

        option && myChart.setOption(option);
		
	</script>
</body>
</html>